<template>
  <div class="webs">
    <Header></Header>
    <div class="banner"></div>
    <div class="body-main">
      <div class="now-actions main-item-card">
        <h1>推荐</h1>
        <div class="actions">
          <span @click="getWebs(0)" class="active mouseCursorLink">最新</span>
          <span @click="getWebsLike(1)" class="mouseCursorLink">最多点赞</span>
          <span @click="getWebsHouse(2)" class="mouseCursorLink">最多收藏</span>
        </div>
      </div>
      <div
        class="main-item-card web-list"
        v-for="(item, index) in webs"
        :key="index"
      >
        <div class="list-top">
          <div class="top-intrduce">
            <div class="top-left">
              <img :src="item.wpic" />
            </div>
            <div class="top-right">
              <a class="web-title" :href="item.wsrc" target="_blank">{{
                item.wtitle
              }}</a>
              <span class="web-content">{{ item.wintruduce }}</span>
            </div>
          </div>

          <div class="tages">
            <span v-for="(tage, index) in item.wclassify" :key="index">{{
              tage
            }}</span>
          </div>
        </div>
        <div class="list-bottom">
          <ul>
            <li>
              <i class="iconfont icon-dianzan_kuai"></i>
              <span>{{ item.wlike }}</span>
            </li>
            <li>
              <i class="iconfont icon-shoucang2"></i>
              <span>{{ item.whouse }}</span>
            </li>
            <a :href="item.wsrc" target="_blank"
              ><li><i class="iconfont icon-huojian"></i></li
            ></a>
          </ul>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import $ from 'jquery'

export default {
  name: 'WebsView',
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      webs: [],
    }
  },
  methods: {
    getWebs(index) {
      this.addActive(index)
      this.$api.web
        .getWebs()
        .then((res) => {
          this.webs = res.data.data
          this.webs.map((v) => {
            v.wclassify = v.wclassify.split(',')
          })
          // console.log(this.webs)
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
    getWebsLike(index) {
      this.addActive(index)
      this.$api.web
        .getWebsLike()
        .then((res) => {
          this.webs = res.data.data
          this.webs.map((v) => {
            v.wclassify = v.wclassify.split(',')
          })
          // console.log(this.webs)
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
    getWebsHouse(index) {
      this.addActive(index)
      this.$api.web
        .getWebsHouse()
        .then((res) => {
          this.webs = res.data.data
          this.webs.map((v) => {
            v.wclassify = v.wclassify.split(',')
          })
          // console.log(this.webs)
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
    addActive(index) {
      $('.actions>span.active').removeClass('active')
      $('.actions>span.mouseCursorLink').eq(index).addClass('active')
    },
  },
  created() {
    this.getWebs()
  },
}
</script>

<style lang="scss" scoped>
.webs {
  background-color: var(--main-bg);
  color: var(--main-color);
  .banner {
    background: url('../assets/img/webs.jpg');
    background-size: cover;
    background-position: center;
    min-height: 400px;
  }
  .body-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > .now-actions {
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > .actions {
        > span {
          display: inline-block;
          padding: 0 1em;
          height: 2em;
          border: solid 1px var(--main-bg);
          line-height: 2em;
          margin-left: 1em;
          transition: border 0.3s, color 0.3s;
          &:hover {
            border: solid 1px yellowgreen;
            color: yellowgreen;
          }
        }
        > span.active {
          border: solid 1px #3a8ee6;
          color: #3a8ee6;
        }
      }
      &:hover {
        transform: translate(0);
      }
    }
    > .web-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: calc((100% - 40px) / 3);
      // border-radius: 2em;

      > .list-top {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        height: 165px;
        padding: 20px 20px 10px;
        background-color: var(--mainContent-bg);
        color: var(--main-color);
        position: relative;
        border-bottom: 1px solid var(--main-color);
        > .top-intrduce {
          display: flex;
          flex-direction: row;
          > .top-left {
            width: 15%;
            > img {
              width: 100%;
            }
          }
          > .top-right {
            width: 85%;
            padding-left: 10px;
            > .web-title {
              display: block;
              margin-bottom: 0.5em;
              font-size: 18px;
              font-weight: 600;
              color: var(--mainContent-color);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            > .web-content {
              display: -webkit-box;
              font-size: 14px;
              line-height: 1.3rem;
              -webkit-line-clamp: 3;
              overflow: hidden;
              overflow-wrap: break-word;
              -webkit-box-orient: vertical;
            }
          }
        }

        .tages {
          width: 100%;
          display: flex;
          overflow: hidden;
          font-size: 14px;
          justify-content: flex-end;
          margin-top: 0.5em;
          > span {
            padding: 0 10px;
            background-color: var(--main-bg);
            border: 1px solid rgba($color: #000000, $alpha: 0.3);
            color: var(--mainContent-color);
            border-radius: 2px;
            margin-left: 10px;
          }
        }
      }
      > .list-bottom {
        width: 100%;
        padding: 10px;
        > ul {
          display: flex;
          width: 100%;
          color: var(--main-color);
          > li:nth-child(1),
          li:nth-child(2) {
            width: 33%;
            display: flex;
            justify-content: center;
            border-right: 1px solid rgba($color: #000000, $alpha: 0.6);
            align-items: center;
            // width: calc(100% / 3);
          }
          a {
            display: block;
            width: 33%;
            display: flex;
            justify-content: center;
            color: var(--main-color);
          }
        }
      }
    }
  }
}
</style>
